// app global css

$fgColor ?= #ADADAD
$bgColor ?= #121212

.quasar
  position absolute
  left 10px
  bottom 10px
  opacity 0.5

.byline
  position absolute
  bottom 10px
  right 10px
  opacity 0.5

.qribbon__container
  position relative

.qribbon__horizontal--left
  position unset !important
  padding unset !important
  margin-left -22px !important
  z-index 1 !important

  &:before
    margin-left -22px

.example-title
  cursor pointer
  &:after
    content ' #'
    opacity 0
  &:hover:after
    opacity 1

.example-page
  padding 16px 46px
  font-weight 300
  max-width 900px
  margin-left auto
  margin-right auto

body {
  padding 0
  margin 0
  font-family "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
  /* font-size 16px */
  line-height 1.5
  background-color #f8f8ff
  color #606c71 }

a
  color #1e6bb8
  text-decoration none
  &:hover
    text-decoration underline

.btn
  display inline-block
  margin-bottom 1rem
  color rgba(255, 255, 255, 0.7)
  background-color rgba(255, 255, 255, 0.08)
  border-color rgba(255, 255, 255, 0.2)
  border-style solid
  border-width 1px
  border-radius 0.3rem
  transition color 0.2s, background-color 0.2s, border-color 0.2s
  &:hover
    color rgba(255, 255, 255, 0.8)
    text-decoration none
    background-color rgba(255, 255, 255, 0.2)
    border-color rgba(255, 255, 255, 0.3)

.btn + .btn
  margin-left 1rem

.project-name
  font-weight 700

@media screen and (min-width 64em)
  .btn
    padding 0.75rem 1rem

@media screen and (min-width 42em) and (max-width 64em)
  .btn
    padding 0.6rem 0.9rem
    font-size 0.9rem

@media screen and (max-width 42em)
  .btn
    display block
    width 100%
    padding 0.75rem
    font-size 0.9rem
  .btn + .btn
    margin-left 0
  .byline
    left 0
    align-text center
  .quasar
    opacity 0

.page-header
  position relative
  color #fff
  text-align center
  background-color $bgColor
  background-image linear-gradient(120deg, $bgColor, $fgColor)

@media screen and (min-width 64em)
  .page-header
    padding 3rem 4rem

@media screen and (min-width 42em) and (max-width 64em)
  .page-header
    padding 2rem 4rem

@media screen and (max-width 42em)
  .page-header
    padding 2rem 1rem 1rem 1rem

  .project-name
    font-weight 700
    margin-top 0
    margin-bottom 0.1rem

@media screen and (min-width 64em)
  .project-name
    font-size 4.25rem

@media screen and (min-width 42em) and (max-width 64em)
  .project-name
    font-size 3.25rem

@media screen and (max-width 42em)
  .project-name
    font-size 2.75rem

  .project-tagline
    font-weight normal
    opacity 0.7

@media screen and (min-width 64em)
  .project-tagline
    font-size 1.75rem

@media screen and (min-width 42em) and (max-width 64em)
  .project-tagline
    font-size 1.25rem

@media screen and (max-width 42em)
  .project-tagline
    font-size 1rem

.main-content :first-child
  margin-top 0
.main-content img
  max-width 100%
.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6
  margin-top 2rem
  margin-bottom 1rem
  font-weight normal
  color #159957
.main-content p
  margin-bottom 1em
.main-content code
  padding 2px 4px
  font-family Consolas, "Liberation Mono", Menlo, Courier, monospace
  font-size 0.9rem
  color #383e41
  background-color #f3f6fa
  border-radius 0.3rem
.main-content pre
  padding 0.8rem
  margin-top 0
  margin-bottom 1rem
  font 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace
  color #567482
  word-wrap normal
  background-color #f3f6fa
  border solid 1px #dce6f0
  border-radius 0.3rem
.main-content pre > code
  padding 0
  margin 0
  font-size 0.9rem
  color #567482
  word-break normal
  white-space pre
  background transparent
  border 0
.main-content .highlight
  margin-bottom 1rem
.main-content .highlight pre
  margin-bottom 0
  word-break normal
.main-content .highlight pre, .main-content pre
  padding 0.8rem
  overflow auto
  font-size 0.9rem
  line-height 1.45
  border-radius 0.3rem
.main-content pre code, .main-content pre tt
  display inline
  max-width initial
  padding 0
  margin 0
  overflow initial
  line-height inherit
  word-wrap normal
  background-color transparent
  border 0
.main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after
  content normal
.main-content ul, .main-content ol
  margin-top 0
.main-content blockquote
  padding 0 1rem
  margin-left 0
  color #819198
  border-left 0.3rem solid #dce6f0
.main-content blockquote > :first-child
  margin-top 0
.main-content blockquote > :last-child
  margin-bottom 0
.main-content table
  display block
  width 100%
  overflow auto
  word-break normal
  word-break keep-all
.main-content table th
  font-weight bold
.main-content table th, .main-content table td
  padding 0.5rem 1rem
  border 1px solid #e9ebec
.main-content dl
  padding 0
.main-content dl dt
  padding 0
  margin-top 1rem
  font-size 1rem
  font-weight bold
.main-content dl dd
  padding 0
  margin-bottom 1rem
.main-content hr
  height 2px
  padding 0
  margin 1rem 0
  background-color #eff0f1
  border 0

@media screen and (min-width 64em)
  .main-content
    max-width 64rem
    padding 2rem 6rem
    margin 0 auto
    font-size 1.1rem

@media screen and (min-width 42em) and (max-width 64em)
  .main-content
    padding 2rem 4rem
    font-size 1.1rem

@media screen and (max-width 42em)
  .main-content
    padding 2rem 1rem
    font-size 1rem

.site-footer
  padding-top 2rem
  margin-top 2rem
  border-top solid 1px #eff0f1

.site-footer-owner
  display block
  font-weight bold

.site-footer-credits
  color #819198

@media screen and (min-width 64em)
  .site-footer
    font-size 1rem

@media screen and (min-width 42em) and (max-width 64em)
  .site-footer
    font-size 1rem

@media screen and (max-width 42em)
  .site-footer
    font-size 0.9rem
